<template>
	<view class="mytop">
	<view class="page">
		<view class="top-background-raduis"></view>
		<view class="login-box">
			<view class="login-card-title">
				<view class="login-card-title-content"> 账号密码登录 </view>
			</view>
			<view class="login-card-input">
				<!-- 输入框头部图标 -->
				<view class="mt">
					<uni-easyinput  v-model="account" focus maxlength="30" :trim="true"
						@focus="UserNamePassWrodFocusBorderStyle" :styles="inputColorConfigToUserName"
						@blur="UserNamePassWrodBlurBorderStyle" placeholder="请输入账号"></uni-easyinput>
				</view>
				<!-- 输入框头部图标 -->
				<view  class="mt">
					<uni-easyinput  v-model="password" type="password" @focus="PassWordFocusBorderStyle"
						@blur="PassWordBlurBorderStyle" :styles="inputColorConfigToPassWord"
						placeholder="请输入密码"></uni-easyinput>
				</view>
			</view>
			<view class="login-card-loginIn">
				<view class="login-card-loginIn-btn" @click="handleLogin">
					登 录
				</view>
			</view>
		</view>
	</view>
	</view>
</template>
<script>
	//import {  } from "@/common/api/{$}.js";
	import {
		setTokenTime
	} from '@/utils/tokenAuth';
	export default {
		data() {
			return {
				// 输入框边框颜色默认值
				colorDefault: '#b4b4b4',
				// 输入框边框聚焦值
				colorFocusColor: '#3cb79a',
				// 输入框颜色配置
				inputColorConfigToUserName: {
					color: "#000000",
					disableColor: "#eee",
					borderColor: "#b4b4b4"
				},
				// 输入框颜色配置
				inputColorConfigToPassWord: {
					color: "#000000",
					disableColor: "#eee",
					borderColor: "#b4b4b4"
				},
				account: "admin",
				password: "123456",
			};
		},
		//监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad
		onInit() {
		},
		//监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）
		onLoad() {

		},
		onShow(){
			//隐藏下方工具栏
		},
		//监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {

		},
		//监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
		beforeDestroy() {},
		//页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。
		onReachBottom() {},
		onShareAppMessage() {},
		created() {},
		methods: {
			// 输入框聚焦变换边框样式
			UserNamePassWrodFocusBorderStyle() {
				this.inputColorConfigToUserName.borderColor = this.colorFocusColor;
			},
			PassWordFocusBorderStyle() {
				this.inputColorConfigToPassWord.borderColor = this.colorFocusColor;
			},
			// 输入框失去焦点变换边框样式
			UserNamePassWrodBlurBorderStyle() {
				this.inputColorConfigToUserName.borderColor = this.colorDefault;
			},
			PassWordBlurBorderStyle() {
				this.inputColorConfigToPassWord.borderColor = this.colorDefault;
			},
			handleLogin() {
				if (this.account && this.password) {
					this.$http.post("/oauth", {
						account: this.account,
						password: this.password,
					}).then((res) => {
						if (res &&res.data&& res.data.code == 1) {
							//设置token时间
							setTokenTime();
							//保存用户token在本地存储
							uni.setStorageSync("token",res.data.token);
							if (res.data.photoUrl) {
								this.$pinia.photoUrl = res.data.photoUrl
							}
							this.$pinia.userId = res.data.userId
							this.$pinia.name = res.data.userName
							this.$pinia.roleList = res.data.roleList
							this.$pinia.perStr = res.data.perStr
							this.$pinia.account = this.account;
							uni.switchTab({
								url: "/pages/index/index"
							})
						} else {
							uni.showToast({
								title: '用户名与密码错误',
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'error',
								//显示持续时间为 2秒
								duration: 3000
							})
						}
					}).catch(err => {
						console.log(err)
					});
				} else {
					uni.showToast({
						title: '请输入用户名或密码',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'error',
						//显示持续时间为 2秒
						duration: 3000
					})
				}
			}
		},
	};
</script>
<style lang="scss" scoped>
	.mytop {
		box-sizing: border-box;

		.page {
			position: relative;
			height: 100vh;
		}

		.top-background-raduis {
			height: 30%;
			background-color: #d8d8d8;
			border-bottom-left-radius: 50%;
			border-bottom-right-radius: 50%;
		}

		.is-input-border {
			border-radius: 7px !important;
		}

		.uni-easyinput__content {
			min-height: 39px !important;
		}

		// .hj-input {
		// 	margin-top: 10px;
		// }

		// .hj-input:nth-child(2) {
		// 	margin-top: 10px;
		// }

		.login-box {
			top: 20%;
			position: absolute;
			// width: 80%;
			left: 10%;
			right: 10%;
			// height: 500rpx;
			padding: 30rpx;
			background-color: white;
			border-radius: 40rpx;
			box-shadow: 9px 9px 6px #e3e3e3;

			.login-card-input {
				// background-color: violet;
				height: 50%;
				padding: 5rpx;
				.mt {
					margin-top: 10px;
				}
			}

			.login-card-title {
				height: 20%;
				// background-color: black;
				padding: 10rpx;
				display: flex;
				justify-content: center;

				.login-card-title-content {
					font-size: 1.2em;
					color: #3cb79a;
					border-bottom: 3px solid #3cb79a;
				}
			}

			.login-card-loginIn {
				height: 25%;
				display: flex;
				justify-content: center;
				padding: 10rpx;
				align-items: center;

				.login-card-loginIn-btn {
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #007aff;
					width: 100%;
					font-size: 1.2em;
					height: 2.1rem;
					border-radius: 40rpx;
					color: white;
				}
			}

			.login-bottom-info {
				height: 5%;
				display: flex;
				font-size: 0.7em;
				color: #3cb79a;
				justify-content: flex-end;

			}
		}

		.bottom-message {
			position: absolute;
			height: 70rpx;
			display: flex;
			width: 100%;
			justify-content: center;
			align-items: center;
			font-size: 0.9em;
			overflow: hidden;
			color: #969898;
			bottom: 40rpx;
		}
	}
</style>